Webflow 101

[McGuire] We've made it to the design review. When we started all of this, which felt like 15 minutes ago but in reality we filmed it on an entirely different day, we've gone from our site looking like this to… what it's going to look like at the end of this lesson. Let's jump right into that list.

‍

[Sara] All right. Let's put hover on the nav links.

‍

[McGuire] Okay, nav link selected.

‍

[Sara] Yep. We go to the hover state.

‍

[McGuire] Hover state. So we're, by default, in none. We'll go to hover.

‍

[Sara] Yes. We actually want to uppen the opacity a little bit.

‍

[McGuire] "Uppen the opacity a little bit", we can do that. On the typography?

‍

[Sara] Yes.

‍

[McGuire] So the opacity is-

‍

[Sara] Actually lower it.

‍

[McGuire] Okay. Okay. We got it. We can't uppen it, we've got to-

‍

[Sara] Yes. That's great. 

‍

[McGuire] There it is. 75?

‍

[Sara] Uh, Yeah, that looks about right.

‍

[McGuire] Okay. Looks good.

‍

[Sara] Okay.

‍

[McGuire] So that's a hover effect. Do you want to transition or for right now, do you want just hard cuts?

‍

[Sara] Hard cuts. But what about the CTA?

‍

[McGuire] So CTA we'll need to do separately.

‍

[Sara] Yeah, let's put one here too.

‍

[McGuire] Hover?

‍

[Sara] Yeah, on hover and let's change the background to black.

‍

[McGuire] Black. Okay.

‍

[Sara] Solid black.

‍

[McGuire] Got it.

‍

[Sara] First one done. All right, so these links are not going anywhere. So we need a destination for these links.

‍

[McGuire] All right. Number two, link.

‍

[Sara] Destination.

‍

[McGuire] Destinations. Okay. So, features needs to take us to-

‍

[Sara] The feature.

‍

[McGuire] Features. So the way we can do this, this is pretty straightforward. If we want to assign an ID to a section, so if we want, when we click features up on the top, if we want this to take us down to this section all we have to do is click that section and add an ID. So let's go over to element settings, we'll add an ID and we'll call it...

‍

[Sara] Features.

‍

[McGuire] Features. That's it. And when we do that, we can now go up, click features and have it – in the Element settings panel – we can have it take us to another spot on this page. Of course, we could go to another URL. We can go to another page on our site but here, we're going to go to a section on this page. We're going to go down, and now we see features.

‍

[Sara] Features. Perfect.

‍

[McGuire] And so if we go to preview and we press features, 

‍

it of course takes us down to features. So, that's the first one. Second one, request a demo.

‍

[Sara] Yes.

‍

[McGuire] Assuming we want to go down here?

‍

[Sara] Yes.

‍

[McGuire] All right so we'll click this section. We'll call it "CTA". Go up to the top, request a demo, and that'll take us page section to CTA. Now you might notice, you'll see a couple other items here like "email form" and what that's doing is it will let us link to that form. The reason we want to choose the section, the reason we want to go to that CTA section we just defined is, if this was a longer page we don't want it taking us to that element - that specific element, that form block itself. We want it taking us to the top of that section. So we have that white space on top, that padding on the top, inside the section. So those are those two. We also have Sign up for the wait list perfect. Instead of to that same spot on the page, we can have it, let's say, take it to an email. Let's email [email protected]. Subject: regarding…

‍

[Sara] Space.

‍

[McGuire] Space. Or did you mean regarding, and then literally a space.

‍

[Sara] Yeah, let's just leave it with a space and go on.

‍

[McGuire] Grímur's going to be so confused. Grímur's email address is [email protected] so feel free to send this subject, or just click this link directly.

‍

[Sara] All right.

‍

[McGuire] All right. Let's continue.

‍

[Sara] That is everything for number two. Let's go to number three.

‍

[McGuire] Cross that off the list.

‍

[Sara] So in the links, speaking of links, we do have perfect and then under here we have "exactly" in the copy. Let's remove that.

‍

[McGuire] So you want to just remove [McGuire] Sign up for the waitlist.

‍

[Sara] Yes.

‍

[McGuire] And Hero, what do you want to do here?

‍

[Sara] Remove "exactly".

‍

[McGuire] All right, we'll remove "exactly". So now it's a little drier but it says, sign up for the waitlist and join the waitlist for early access. By the way, what does this button do?

‍

[Sara] That's actually going down to the form too.

‍

[McGuire] All right, so let's do that. To the section we know we're going to go down to the CTA. And so now if we click over here into preview, we can click either this, request a demo or join the waitlist for early access. Are you sure? These both say waitlist.

‍

[Sara] No, that should go too.

‍

[McGuire] We should have this one email Grímur too. So that's it. So we'll have [email protected]. 

And Regarding: space.

‍

[Sara] Space.

‍

[McGuire] That's it. All right.

‍

[Sara] Perfect. Done. Number four.

‍

[McGuire] That's three.

‍

[Sara] We're going to change the size of the H1 here on the hero section.

‍

[McGuire] All right. What do you want to do with this? We're changing the size.

‍

[Sara] We want to increase the size. Let's do 80, so you can actually see the different lines.

‍

[McGuire] Yeah, totally. 80.

‍

[Sara] One.

‍

[McGuire] 81. Oh, that was … that was impressive.

‍

[Sara] Great. There we go. Yeah.

‍

[McGuire] Okay. So 81, we're looking at a line height of 65, which is a little tight, especially if we had like a J, you could see that intersection so a "caljendar". If we remove that though, we can actually adjust the height. You want to do unitless?

‍

So we could use one hyphen, and what unitless will do, it'll scale. So now whenever it's 81, the line height will be 81. If we set it to something like 50, the line height will be 50. You'll see that line height scales proportionally as we adjust the size. So you were at 81?

‍

[Sara] Yeah.

‍

[McGuire] Is that where you want to land finally or you want to go?

‍

[Sara] No, 70.

‍

[McGuire] 70. You want to set the alignment to center?

‍

[Sara] Yes, exactly.

‍

[McGuire] All right. We'll do that.

‍

[Sara] Perfect.

‍

[McGuire] Line height one, looking good. All right. Cross that off.

‍

[Sara] All right. Number four done. 

Let's do number five.  So you can see that everything on this page is actually not pure black.

‍

[McGuire] No, it's actually a white background. In fact, if we go to the body, we can see the color.

‍

[Sara] No, the text element.

‍

[McGuire] The text elements. That's right. It's like a dark gray. It looks like 333.

‍

[Sara] 333.

‍

[McGuire] That's right.

‍

[Sara] Let's do it pure black.

‍

[McGuire] All right. So with the body selected, so the body element - again, because of text inheritance, we can make sweeping changes on the body and we can always override those but with the body element selected, let's change the default color to what'd you say, red?

‍

[Sara] No.

‍

[McGuire] The reason we're switching to red though is just to demonstrate that these changes... It's not the obvious thing when you switch from 333 to black. So just switching to red for a second, we can see, because of text inheritance, unless we've set a more specific color on specific text elements, they will inherit those changes. So we can see that that's affecting the heading. We can see it's affecting the paragraph, these headings. So you want to change that to a pure black color.

‍

[Sara] Yes.

‍

[McGuire] All right.

‍

[Sara] Let's move on to number six.

‍

[McGuire] All right, number six.

‍

[Sara] We want to have the larger paragraph here. We want to increase the size.

‍

[McGuire] So the hero paragraph, by default, it's inheriting from the body. So if we go to the body, we can see 14 pixels and if we go to hero paragraph, it's also 14. In fact, if we click that amber indicator, we could see that value is coming from Body all pages. Two things to note, we can absolutely change this. So we want to do something like 20 or 22.

‍

[Sara] Or 16.

‍

[McGuire] 16. But something to note, it's still 20. 20 pixels line height from Body all pages.  

So we could do what we did in the previous one and use that line height example. So with body selected, let's change our line height to 1.2, 1.4 for paragraphs, 1.4 unitless. And now we don't have to set that manually so when we change our size on anything like this, it'll take that 1.4 into account. So you said 16?

‍

[Sara] Perfect.

‍

[McGuire] All right.

‍

[Sara] All right, number six, done. Let's move on to number seven.

‍

[McGuire] Number seven.

‍

[Sara] And we actually need to scroll down this page.

‍

[McGuire] All right.

‍

[Sara] So, I want to center the trusted by.

‍

[McGuire] All right. Do you want to get rid of that colon?

‍

[Sara] Yeah, let's do that.

‍

[McGuire] Let's do it.

‍

[Sara] Perfect. Number seven done. Let's go on to number eight.

‍

[McGuire] This is incredible progress.

‍

[Sara] If we look at these logo, these are not really balanced. So we want to have a-

‍

[McGuire] You're saying optical balance of them.

‍

[Sara] Add an optical balance, exactly.

‍

[McGuire] All right, United Federation of Planets over here. ESA over here. Maybe Space and Avenue 5 can be here.

‍

[Sara] Mhmm. Yeah

‍

[McGuire] How's that feel?

[Sara] Much more balanced.

‍

[McGuire] Okay. That's eight. 

What about number nine?

‍

[Sara] Let's scroll down to the form because the success and error message did not look great.

‍

[McGuire] All right, we'll go down to the form. In fact, we can collapse all of these so we can just see our sections cleanly. Go in here, go into the container. 

‍

With our form blocks selected we'll go over to element settings and you're talking success.

‍

[Sara] Exactly.

‍

[McGuire] And error state. So these look pretty good. 

What do you want to change?

‍

[Sara] It's a little bit blocky.

‍

[McGuire] Blocky?

‍

[Sara] So let's decrease the padding top and bottom.

‍

[McGuire] Decrease padding.

‍

[Sara] Yes.

‍

[McGuire] Uhh…how about 13?

‍

[Sara] Sure. Let's go to error state.

‍

[McGuire] All right. With our form block selected, we'll go over to the error state.

‍

[Sara] Looks pretty good. That's it for desktop, let's go to tablet. 

‍

[McGuire] All right, tablet.

‍

[Sara] Yes, and scroll up to the logo section.

‍

[McGuire] Logo section in tablet.

‍

[Sara] Yes. It's a little bit tight here, so I actually want to have it on two rows.

‍

[McGuire] Okay. We'll go into edit that grid. So again, we can go in right here to edit that grid. Or with the logo holder selected, we can go into edit grid and we can delete three columns, any three columns, and it'll make it a three column, but two row layout. How's that look?

‍

[Sara] Yeah, looks good.

‍

[McGuire] All right.

‍

[Sara] That's it for number 10. Let's do 11. So go to the card section.

‍

[McGuire] Okay. What do you want in the card section?

‍

[Sara] I want the gap of the grid to be the same as the form.

‍

[McGuire] That's really intense, the way you said that, but it's a really good note. So let's go in and...

‍

[Sara] Let's do it.

‍

[McGuire] Change the gap to make it so the form 

has a gap of 10.

‍

[Sara] 10.

‍

[McGuire] So you want this grid. So we'll go to edit this grid, the feature grid, to also have a gap of 10.

‍

[Sara] It looks good.

‍

[McGuire] All right.

‍

[Sara] All right, that's 11.

‍

[McGuire] What's 12?

‍

[Sara] Scroll up again.

‍

[McGuire] Scroll up where?

‍

[Sara] To the navbar.

‍

[McGuire] Navbar, what do we got?

‍

[Sara] So you can see that the spacing on the left and right side here is inconsistent.

‍

[McGuire] That's right.

‍

[Sara] So we want to even that out.

‍

[McGuire] So there's a couple things going on here. Number one, calendar does not look vertically aligned within this. So, even in desktop, let's take a look at what's going on. 

‍

So 14, we can increase that to maybe 15. 

See if that's a little more centered. And we'll go into tablet now and make sure... you're saying the left and right aren't aligned.

‍

[Sara] Yes.

‍

[McGuire] So, optically you're saying the right point of the icon is... 

‍

So the distance from – let's hit escape here – the distance from the edge of the viewport to this part of the logo...

‍

[Sara] Exactly.

‍

[McGuire] is far less than the distance between this edge of the viewport and this icon right here. So, this space on the left is, let's see, 30. This space on the right is also 30, but we have this menu button. So with the menu button selected, we could just subtract how much?

‍

[Sara] Let's subtract 18.

‍

[McGuire] So we're kind of undoing that margin.

[Sara] Yeah.

‍

[McGuire] But, if we look even with this right here, we see this extra few.

‍

[Sara] Yeah, let's do 19. Yeah, you're right.

‍

[McGuire] So minus 21.

‍

[Sara] Sure.

[McGuire] You said 19. Can we compromise?

‍

[Sara] Let's do 20.

‍

[McGuire] Okay, so…minus 20.

‍

[Sara] That's it for 12. Let's go to mobile. Scroll down to the form.

‍

[McGuire] Form.

‍

[Sara] Yes. And you can see the submit button is a little bit tight to the form.

‍

[McGuire] Got it.

‍

[Sara] So we need to increase this margin there.

‍

[McGuire] To what? 20?

‍

[Sara] Yep... 21.

‍

[McGuire] 21. I think 23 so let's compromise at 22.

‍

[Sara] All right. That's 13. Let's go to 14.

‍

[McGuire] 14. Let's do it.

‍

[Sara] Okay. We're actually going to go into accessibility now. We're going to put alt text on all the images.

‍

[McGuire] Now, there's a few ways to add alt text to images. So, for example, with this image selected, if we click this image, we go to the element settings here, we can go in and choose in our alt text a custom description. We can say...

‍

[Sara] "Calendar".

‍

[McGuire] "Calendar app interface, showing time travel details". And so we can have a custom description for alt text. But the other way we can do this, and this is really helpful, especially if we're using things like the logo multiple times, not just on a page, but in a site, we can go over to our assets panel, and we can take a look at things like the logo. So if we go to the calendar logo, we can press the settings button right here. And when we change it on the asset, if we say Calendar or Calendar logo, when we change that, it now affects all instances of that asset. So, if we were to go in and look at the alt text now on this logo, or if we were to do it on this logo, they would both have the same alt text. 

‍

Now,  before we add the others, why are we adding alt text? 

Why is it important?

‍

Well, it's not just important for search engine optimization, which it is, so that search engines can pick up content that might be in an image or pick up the meaning of that image. But it's also really important for anyone who's using or navigating through the web or this site using something like a screen reader. So it's really important because if you're using a screen reader and you come across something like this, it won't know the content of this image. So anything that has meaning, whether it's a logo showing an endorsement or a trusted by, if it's any meaningful content on the page, it needs to have alt text if it's stored in an image. Now we're going to speed through this in post so you don't have to sit through us typing out each of the descriptions manually, but we're writing meaningful descriptions for each of the image assets.

‍

[Sara] All right, so that's 14. Let's clean up the classes and go to number 15.

‍

[McGuire] So, we'll clean up classes so we'll go to our style manager and we'll clean up our unused classes, we'll hit remove. And then you said clean up classes and go to 15?

‍

[Sara] All right. 15 done.

‍

[McGuire] What is 15?

‍

[Sara] No, 15 done. Let's go to 16.

‍

[McGuire] That's it? This is great progress.

‍

[Sara] So that's SEO and open graph.

‍

[McGuire] So assuming page settings is going to encapsulate most of this.

‍

[Sara] Yes.

‍

[McGuire] In our Pages panel, we can go to pages and we can go to our one static page here, this of course, is our homepage. We can go to the settings for this page. So the page name internally here is Home, that's fine. There are a few things to change, especially in terms of how this will show up in a search engine. So we'll go to the title tag and say, “Calendar: The app... The one app you need to rule time and space”. And the meta description, of course we can steal for right now let's save this let's save our changes there. We can steal the hero paragraph just for this example. We can always change this later. But back into the page settings, let's paste that into our meta description. Now, why is this important?

‍

Why is SEO important, and what does SEO stand for? Of course, it's "search engine optimization". But the really important reason we want to fill this out is we want to display what our preference is to search engines. 

‍

So our preference to search engines is to display: "Calendar: The one app you need to rule time and space”. And this meta description, this description underneath. Now we can optimize this later, but this is a good starting point. That leads us, of course, to our open graph settings. "Open graph" or OG image, OG title, these let us define what's going to happen when you paste and share this on a lot of social platforms like Facebook, like Twitter. So we can write unique titles for this. We could write, "Hello Sara".

‍

[Sara] Hi.

‍

[McGuire] Yes.

‍

[Sara] Yeah.

‍

[McGuire] Or we can say same as SEO tag, which we can do to save some time right now. But keep in mind if we don't want that duplicated, we want something unique for a social share, we can uncheck “same as” and write our own custom descriptions. But that is of course, our SEO settings and our open graph settings for this page so we hit save.

‍

[Sara] It looks a little bit dry.

‍

[McGuire] What looked a little dry?

‍

[Sara] Ahhh, just open graph

‍

[McGuire] You're thinking OG image.

‍

[Sara] Yeah. Mm-hmm.

‍

[McGuire] Let's go in and grab.

Let's say we want to use our app image right here.

‍

[Sara] Exactly.

‍

[McGuire] We can actually go in and this little link icon, let's copy the little link icon to the clipboard. We'll close out and we can go back into pages, go back into settings, and we can paste where it says Open graph, image URL.

‍

[Sara] Paste.

‍

[McGuire] Paste. Now this will be shared on social. All right, let's save our changes.

‍

[Sara] All right.

‍

[McGuire] What do we have next?

‍

[Sara] Nothing. That's it.

‍

[McGuire] That is it. How many things did we address?

‍

[Sara] 16.

‍

[McGuire] Doesn't matter because our site is ready to go.

‍

 Up next, we're going to publish our site for the world to see. But before that, we'll cut to black, but keep the audio rolling.

‍

[Sara] Why would we do that?

‍

[McGuire] Do what?

‍

[Sara] This. Cut to black and keep the audio.

‍

[McGuire] This is way more engaging than the stuff we were doing before.

‍

[Sara] You're probably right.

‍

[Grímur] I am so grateful because you watching these videos or taking our courses or reading our documentation on Webflow University and just interacting with us is just such a privilege for me.

‍

And I’m so grateful for being a part of a team that is enabled to deliver this – this content – this education to you so you can make the most out of it. 

‍

And I'm just super, super thankful to be a part of it. So continue to do your best and we’ll continue to do our best.

‍